<template>
  <!-- 好生活结佣汇总-楼盘成交详情 -经纪人奖励佣金详情列表 -->
  <div class="borkerRewardTable">
    <table-list
      :tableData="tableData"
      :tableInfos="tableInfos"
      :tableChangeBtns="tableChangeBtns"
      :tableFormatter="tableFormatter"
      :hasSera="true"
      :showSummary="true"
      :summaryMethod="summaryMethod"
    ></table-list>
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:30px"
      :current-page.sync="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :total="totalSize"
    ></el-pagination>
  </div>
</template>

<script type="text/ecmascript-6">
import tableList from "../../common/tableList";
import utils from "@/common/utils.js";
import api from "@/api/apiPath";
export default {
  //name: "borkerRewardTable",
  components: {
    "table-list": tableList
  },
  data() {
    return {
      tableData: [],
      tableInfos: [
        { label: "结佣节点", prop: "nodeName" },
        { label: "时间", prop: "dealTime" },
        { label: "成交价", prop: "dealAmount" },
        { label: "房款", prop: "devAmount" },
        { label: "经纪人奖励金额", prop: "nodeAmount" },
        { label: "佣金套餐", prop: "changeBtn" }
      ],
      tableChangeBtns: [{ label: "查看详情", type: "view", fn: this.view }],
      pageNum: 1,
      pageSize: 10, //每页几条
      totalSize: 0,
      totalRows: {},
      firstFlag: true
    };
  },
  created() {},
  mounted() {},
  methods: {
    searchList(pageNum) {
      let param = {
        pageNum: pageNum || this.pageNum,
        pageSize: this.pageSize,
        ...this.idInfos
      };
      this.axios.post(api.getBrokerRewardPageList, param).then(res => {
        if (res.data.code == 200) {
          this.firstFlag = false;
          this.tableData = res.data.data.list.list || [];
          this.totalRows = res.data.data.Total || {};
          this.totalSize = res.data.data.list.total;
        }
      });
    },
    //表格格式化方法。prop对应array下标
    tableFormatter(prop, val) {
      if (val === null) {
        return "——";
      }
      let moneyFormatter = ["dealAmount", "devAmount", "nodeAmount"];
      if (moneyFormatter.includes(prop)) {
        return this.formatMoney(val);
      }
      if (prop === "dealTime") {
        return utils.getTimeString(+val);
      }
      if (prop === "brokerageProportion") {
        return val + "%";
      }
      return val;
    },

    handleCurrentChange() {
      this.searchList();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.searchList(1);
    },
    view(type, idx, row) {
      let id = row.customerFollowId;
      if (id) {
        window.open(`${api.viewCommInfo}customerFollowId=${id}`, true);
      }
    },
    //合计显示规则
    summaryMethod() {
      return this.totalRows;
    },
    formatMoney(val) {
      return val ? utils.formatMoney(val) : "0.00";
    }
  },
  props: ["idInfos", "active"],
  watch: {
    active(val) {
      if (this.firstFlag && val) {
        this.searchList();
      }
    }
  },
  computed: {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus"></style>
